<template>
    <div class="error-page">
        <div class="glitch-container">
            <div class="glitch" data-text="404">404</div>
        </div>
        <div class="error-text glow-text">PAGE NOT FOUND</div>
        <div class="error-desc">您访问的页面不存在或已被移除</div>
        <div class="error-actions">
            <el-button type="primary" @click="goHome">
                <i class="fa fa-home"></i> 返回首页
            </el-button>
            <el-button @click="goBack">
                <i class="fa fa-arrow-left"></i> 返回上一页
            </el-button>
        </div>

        <div class="tech-circles">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <div class="tech-grid">
            <div v-for="n in 40" :key="n" class="grid-item"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
  router.push('/')
}

const goBack = () => {
  router.go(-1)
}
</script>

<style lang="scss" scoped>
.error-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    text-align: center;
    padding: 20px;
    overflow: hidden;
}

.glitch-container {
    position: relative;
    margin-bottom: 20px;
}

.glitch {
    position: relative;
    font-size: 120px;
    font-weight: bold;
    color: #00eaff;
    letter-spacing: 10px;
    text-shadow: 0 0 20px rgba(0, 234, 255, 0.7);
    animation: glitch 2s infinite;

    &::before,
    &::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    &::before {
        left: -2px;
        text-shadow: 2px 0 #ff005b;
        animation: glitch-1 2s infinite linear alternate-reverse;
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    }

    &::after {
        left: 2px;
        text-shadow: -2px 0 #3c8ce7;
        animation: glitch-2 3s infinite linear alternate-reverse;
        clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    }

    @media (max-width: 767px) {
        font-size: 80px;
    }
}

.error-text {
    font-size: 28px;
    margin-bottom: 10px;
    color: #00eaff;
    letter-spacing: 3px;
    font-weight: bold;

    @media (max-width: 767px) {
        font-size: 22px;
    }
}

.error-desc {
    color: #e6e6e6;
    margin-bottom: 30px;
    font-size: 16px;
    max-width: 600px;
    opacity: 0.8;
}

.error-actions {
    margin-bottom: 30px;

    button {
        margin: 0 10px;
    }
}

.tech-circles {
    position: absolute;
    bottom: 30px;
    display: flex;
    gap: 15px;

    .circle {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #00eaff;
        opacity: 0.5;
        animation: pulse 4s infinite;

        &:nth-child(1) {
            animation-delay: 0s;
        }

        &:nth-child(2) {
            animation-delay: 1s;
        }

        &:nth-child(3) {
            animation-delay: 2s;
        }

        &:nth-child(4) {
            animation-delay: 3s;
        }
    }
}

.tech-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    z-index: -1;
    opacity: 0.15;
    pointer-events: none;

    .grid-item {
        width: 5%;
        height: 5%;
        background-color: transparent;
        border: 1px solid #3c8ce7;
        transform: rotate(45deg);
        transition: all 0.5s;

        &:hover {
            background-color: rgba(0, 234, 255, 0.3);
        }
    }
}

@keyframes glitch {
    0% {
        transform: skew(0deg);
    }

    20% {
        transform: skew(0deg);
    }

    21% {
        transform: skew(3deg);
    }

    23% {
        transform: skew(0deg);
    }

    25% {
        transform: skew(-3deg);
    }

    27% {
        transform: skew(0deg);
    }

    100% {
        transform: skew(0deg);
    }
}

@keyframes glitch-1 {
    0% {
        clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
    }

    50% {
        clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    }

    100% {
        clip-path: polygon(0 0, 100% 0, 100% 15%, 0 15%);
    }
}

@keyframes glitch-2 {
    0% {
        clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    }

    50% {
        clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    }

    100% {
        clip-path: polygon(0 85%, 100% 85%, 100% 100%, 0 100%);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}
</style>